<template>
    <view class="popup-mask" v-if="visible" @click.stop="handleMaskClick">
        <view class="popup-content" @click.stop>
            <view class="popup-header">
                <text class="popup-title">wifi连接</text>
                <view class="close-btn" @click="close">
                    <text class="close-icon">×</text>
                </view>
            </view>
            <view class="popup-body">
                <view class="wifi-info">
                    <text class="wifi-text">WIFI账号: bianjie</text>
                    <text class="wifi-text">WIFI密码: bianjie2022</text>
                </view>
                <view class="action-btns">
                    <button class="btn copy-btn" @click="copyPassword">复制密码</button>
                    <button class="btn connect-btn" @click="connect">一键连接</button>
                </view>
                <text class="note-text">部分机型不支持一键wifi,请复制密码去自行连接</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'WifiPopup',
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        close() {
            this.$emit('update', false);
        },
        handleMaskClick() {
            this.close();
        },
        copyPassword() {
            uni.setClipboardData({
                data: 'bianjie2022',
                success: () => {
                    uni.showToast({
                        title: '密码已复制',
                        icon: 'none'
                    });
                }
            });
        },
        connect() {
            // 尝试连接WiFi (仅在特定平台生效)
            // #ifdef APP-PLUS
            plus.networkinfo.connectToWifi({
                SSID: 'bianjie',
                password: 'bianjie2022',
                success: () => {
                    uni.showToast({
                        title: '连接成功',
                        icon: 'success'
                    });
                    this.close();
                },
                fail: (err) => {
                    uni.showToast({
                        title: '请手动连接WiFi',
                        icon: 'none'
                    });
                }
            });
            // #endif

            // 其他平台
            // #ifndef APP-PLUS
            uni.showToast({
                title: '请手动连接WiFi',
                icon: 'none'
            });
            // #endif
        }
    }
}
</script>

<style>
.popup-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-content {
    width: 600rpx;
    background-color: #fff;
    border-radius: 12rpx;
    overflow: hidden;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    background-color: #7FB992;
    position: relative;
}

.popup-title {
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 500;
}

.close-btn {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    height: 56rpx;
    width: 56rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-icon {
    font-size: 48rpx;
    color: #ffffff;
    font-weight: 300;
}

.popup-body {
    padding: 40rpx 30rpx;
}

.wifi-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20rpx;
    margin-bottom: 40rpx;
}

.wifi-text {
    font-size: 30rpx;
    color: #333;
}

.action-btns {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;
}

.btn {
    width: 45%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 8rpx;
    font-size: 28rpx;
    margin: 0;
}

.copy-btn {
    background-color: #f8f8f8;
    color: #333;
    border: 1px solid #e0e0e0;
}

.connect-btn {
    background-color: #7FB992;
    color: #ffffff;
}

.note-text {
    font-size: 24rpx;
    color: #999;
    text-align: center;
}
</style>
